<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="中文姓名" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入中文姓名"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="民族 下拉框" prop="ethnicity">
        <el-input
          v-model="queryParams.ethnicity"
          placeholder="请输入民族 下拉框"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="性别 0男 1女" prop="gender">
        <el-input
          v-model="queryParams.gender"
          placeholder="请输入性别 0男 1女"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="身份证号码" prop="idCardNumber">
        <el-input
          v-model="queryParams.idCardNumber"
          placeholder="请输入身份证号码"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="出生日期" prop="birthDate">
        <el-date-picker clearable
          v-model="queryParams.birthDate"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择出生日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input
          v-model="queryParams.phone"
          placeholder="请输入联系电话"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="个人邮箱" prop="email">
        <el-input
          v-model="queryParams.email"
          placeholder="请输入个人邮箱"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="籍贯" prop="nativePlace">
        <el-input
          v-model="queryParams.nativePlace"
          placeholder="请输入籍贯"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="户籍所在地" prop="address">
        <el-input
          v-model="queryParams.address"
          placeholder="请输入户籍所在地"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="最高学历 下拉框" prop="degree">
        <el-input
          v-model="queryParams.degree"
          placeholder="请输入最高学历 下拉框"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="入职日期" prop="hireDate">
        <el-date-picker clearable
          v-model="queryParams.hireDate"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择入职日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="员工微信号" prop="wechat">
        <el-input
          v-model="queryParams.wechat"
          placeholder="请输入员工微信号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="员工现居住地" prop="currentAddress">
        <el-input
          v-model="queryParams.currentAddress"
          placeholder="请输入员工现居住地"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="紧急联系人姓名" prop="contactName">
        <el-input
          v-model="queryParams.contactName"
          placeholder="请输入紧急联系人姓名"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="与员工关系" prop="contactRelation">
        <el-input
          v-model="queryParams.contactRelation"
          placeholder="请输入与员工关系"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="紧急联系人电话" prop="contactPhone">
        <el-input
          v-model="queryParams.contactPhone"
          placeholder="请输入紧急联系人电话"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['staff:staff:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['staff:staff:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['staff:staff:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['staff:staff:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="staffList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="员工主键ID" align="center" prop="id" />
      <el-table-column label="姓名" prop="name">
        <template #default="scope">
          <el-link type="primary" @click="openDialog(scope.row)">
            {{ scope.row.name }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="民族 下拉框" align="center" prop="ethnicity" />
      <el-table-column label="性别 0男 1女" align="center" prop="gender" />
      <el-table-column label="身份证号码" align="center" prop="idCardNumber" />
      <el-table-column label="出生日期" align="center" prop="birthDate" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.birthDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="婚姻状况 0未婚 1已婚" align="center" prop="maritalStatus" />
      <el-table-column label="联系电话" align="center" prop="phone" />
      <el-table-column label="个人邮箱" align="center" prop="email" />
      <el-table-column label="政治面貌" align="center" prop="politicalStatus" />
      <el-table-column label="籍贯" align="center" prop="nativePlace" />
      <el-table-column label="户籍所在地" align="center" prop="address" />
      <el-table-column label="健康状况" align="center" prop="healthStatus" />
      <el-table-column label="最高学历 下拉框" align="center" prop="degree" />
      <el-table-column label="入职日期" align="center" prop="hireDate" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.hireDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="当前在职状态" align="center" prop="status" />
      <el-table-column label="员工微信号" align="center" prop="wechat" />
      <el-table-column label="员工现居住地" align="center" prop="currentAddress" />
      <el-table-column label="紧急联系人姓名" align="center" prop="contactName" />
      <el-table-column label="与员工关系" align="center" prop="contactRelation" />
      <el-table-column label="紧急联系人电话" align="center" prop="contactPhone" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['staff:staff:edit']">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['staff:staff:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" title="员工详情" width="900px">
      <el-descriptions title="员工信息" :column="3" border>
  <el-descriptions-item label="姓名">{{ dialogStaff.name || '--' }}</el-descriptions-item>
  <el-descriptions-item label="工号">{{ dialogStaff.jobInfo.jobNumber || '--' }}</el-descriptions-item>
  <el-descriptions-item label="部门">{{ dialogStaff.jobInfo.department || '--' }}</el-descriptions-item>
  <el-descriptions-item label="状态">{{ dialogStaff.jobInfo.employeeStatus || '--' }}</el-descriptions-item>

  <el-descriptions-item label="入职日期">{{ parseTime(dialogStaff.jobInfo.entryDate) }}</el-descriptions-item>
  <el-descriptions-item label="年龄">{{ getAge(dialogStaff.birthDate) }}</el-descriptions-item>
</el-descriptions>

      <!-- 中部选项卡按钮 -->
      <div style="margin: 20px 0;">
        <el-button
          v-for="tab in tabs"
          :key="tab.value"
          :type="activeTab === tab.value ? 'primary' : 'default'"
          @click="activeTab = tab.value"
          style="margin-right: 10px;"
        >
          {{ tab.label }}
        </el-button>
      </div>

      <div style="min-height: 200px; padding: 10px; border: 1px dashed #ccc;">
        <div v-if="activeTab === 'base'">
          <div class="container mx-auto p-4">
            <!-- 基本信息 -->
            <div class="bg-white shadow-md rounded p-6 mb-6">
              
              <el-descriptions title="基本信息" :column="2" border>
  <el-descriptions-item label="姓名">{{ dialogStaff.name || '--' }}</el-descriptions-item>
  <el-descriptions-item label="民族">{{ dialogStaff.ethnicity || '--' }}</el-descriptions-item>
  <el-descriptions-item label="性别">{{ dialogStaff.gender === '0' ? '男' : '女' }}</el-descriptions-item>
  <el-descriptions-item label="身份证号码">{{ dialogStaff.idCardNumber || '--' }}</el-descriptions-item>
  <el-descriptions-item label="出生日期">{{ parseTime(dialogStaff.birthDate) }}</el-descriptions-item>
  <el-descriptions-item label="婚姻状况">{{ dialogStaff.maritalStatus === '0' ? '未婚' : '已婚' }}</el-descriptions-item>
  <el-descriptions-item label="联系电话">{{ dialogStaff.phone }}</el-descriptions-item>
  <el-descriptions-item label="个人邮箱">{{ dialogStaff.email }}</el-descriptions-item>
  <el-descriptions-item label="籍贯">{{ dialogStaff.nativePlace }}</el-descriptions-item>
  <el-descriptions-item label="户籍所在地">{{ dialogStaff.address }}</el-descriptions-item>
  <el-descriptions-item label="最高学历">{{ getDegreeName(dialogStaff.degree) }}</el-descriptions-item>
  <el-descriptions-item label="入职日期">{{ parseTime(dialogStaff.hireDate) }}</el-descriptions-item>
  <el-descriptions-item label="员工微信号">{{ dialogStaff.wechat }}</el-descriptions-item>
  <el-descriptions-item label="员工现居住地">{{ dialogStaff.currentAddress }}</el-descriptions-item>
  <el-descriptions-item label="紧急联系人">{{ dialogStaff.contactName }}</el-descriptions-item>
  <el-descriptions-item label="与员工关系">{{ dialogStaff.contactRelation }}</el-descriptions-item>
  <el-descriptions-item label="联系人电话">{{ dialogStaff.contactPhone }}</el-descriptions-item>
</el-descriptions>
            </div>


             <div>
              <el-divider content-position="left">教育经历</el-divider>
<el-table
  v-if="dialogStaff.educationExperiences && dialogStaff.educationExperiences.length"
  :data="dialogStaff.educationExperiences"
  border stripe style="width: 100%; margin-bottom: 20px;"
>
  <el-table-column prop="school" label="学校" />
  <el-table-column label="学历">
    <template #default="{ row }">{{ getDegreeName(row.degree) }}</template>
  </el-table-column>
  <el-table-column prop="major" label="专业" />
  <el-table-column label="时间段">
    <template #default="{ row }">
      {{ parseTime(row.startDate) }} - {{ parseTime(row.endDate) }}
    </template>
  </el-table-column>
  <el-table-column prop="educationType" label="教育类型" />
  <el-table-column label="是否第一学历">
    <template #default="{ row }">{{ row.isFirstDegree ? '是' : '否' }}</template>
  </el-table-column>
</el-table>
<el-divider content-position="left">证书信息</el-divider>
<el-table
  v-if="dialogStaff.certificates && dialogStaff.certificates.length"
  :data="dialogStaff.certificates"
  border stripe style="width: 100%; margin-bottom: 20px;"
>
  <el-table-column prop="name" label="证书名称" />
  <el-table-column prop="level" label="等级" />
  <el-table-column prop="number" label="证书编号" />
  <el-table-column prop="issueOrg" label="颁发机构" />
  <el-table-column label="发证日期">
    <template #default="{ row }">{{ parseTime(row.issueDate) }}</template>
  </el-table-column>
  <el-table-column label="有效期">
    <template #default="{ row }">{{ parseTime(row.validFrom) }} - {{ parseTime(row.validTo) }}</template>
  </el-table-column>
  <el-table-column prop="remarks" label="备注" />
</el-table>
<el-divider content-position="left">工作经历</el-divider>
<el-table
  v-if="dialogStaff.workExperiences && dialogStaff.workExperiences.length"
  :data="dialogStaff.workExperiences"
  border stripe style="width: 100%; margin-bottom: 20px;"
>
  <el-table-column prop="company" label="公司" />
  <el-table-column prop="position" label="职位" />
  <el-table-column label="时间段">
    <template #default="{ row }">{{ parseTime(row.startDate) }} - {{ parseTime(row.endDate) }}</template>
  </el-table-column>
  <el-table-column prop="reason" label="离职原因" />
  <el-table-column prop="verifierName" label="证明人" />
  <el-table-column prop="verifierPhone" label="联系电话" />
  <el-table-column prop="remarks" label="备注" />
</el-table>

<el-divider content-position="left">培训经历</el-divider>
<el-table
  v-if="dialogStaff.trainingExperiences && dialogStaff.trainingExperiences.length"
  :data="dialogStaff.trainingExperiences"
  border stripe style="width: 100%; margin-bottom: 20px;"
>
  <el-table-column prop="courseName" label="课程名称" />
  <el-table-column prop="organization" label="培训机构" />
  <el-table-column label="时间段">
    <template #default="{ row }">{{ parseTime(row.startDate) }} - {{ parseTime(row.endDate) }}</template>
  </el-table-column>
  <el-table-column prop="duration" label="时长" />
  <el-table-column prop="score" label="成绩" />
  <el-table-column prop="certificateName" label="结业证书" />
  <el-table-column prop="remarks" label="备注" />
</el-table>

  </div>
          </div>
        </div>
        <div v-else-if="activeTab === 'position'">
          <!-- 岗位信息 -->
<div v-if="activeTab === 'position'" class="bg-white shadow-md rounded p-6">
  <el-descriptions title="岗位信息" :column="2" border>
  <el-descriptions-item label="入职日期">
    {{ parseTime(dialogStaff.jobInfo.entryDate) }}
  </el-descriptions-item>
  <el-descriptions-item label="工号">
    {{ dialogStaff.jobInfo.jobNumber || '--' }}
  </el-descriptions-item>
  <el-descriptions-item label="所属部门">
    {{ dialogStaff.jobInfo.department || '--' }}
  </el-descriptions-item>
  <el-descriptions-item label="岗位">
    {{ dialogStaff.jobInfo.position || '--' }}
  </el-descriptions-item>
  <el-descriptions-item label="工作地点">
    {{ dialogStaff.jobInfo.workplace || '--' }}
  </el-descriptions-item>
  <el-descriptions-item label="详细地址">
    {{ dialogStaff.jobInfo.detailedLocation || '--' }}
  </el-descriptions-item>
  <el-descriptions-item label="所在城市">
    {{ dialogStaff.jobInfo.city || '--' }}
  </el-descriptions-item>
  <el-descriptions-item label="招聘渠道">
    {{ dialogStaff.jobInfo.recruitChannel || '--' }}
  </el-descriptions-item>
  <el-descriptions-item label="当前状态">
    {{ dialogStaff.jobInfo.employeeStatus || '--' }}
  </el-descriptions-item>
  <el-descriptions-item label="司龄起始">
    {{ parseTime(dialogStaff.jobInfo.seniorityStart) }}
  </el-descriptions-item>
  <el-descriptions-item label="直属主管">
    {{ dialogStaff.jobInfo.supervisor || '--' }}
  </el-descriptions-item>
</el-descriptions>

</div>
        </div>
        <div v-else-if="activeTab === 'contract'"><div v-if="activeTab === 'contract'" class="bg-white shadow-md rounded p-6">
  <el-divider content-position="left">员工合同</el-divider>
  <el-table
    v-if="dialogStaff.contracts && dialogStaff.contracts.length"
    :data="dialogStaff.contracts"
    border
    stripe
    style="width: 100%; margin-top: 10px;"
  >
    <el-table-column prop="contractNumber" label="合同编号" />
    <el-table-column prop="contractType" label="合同类型" />
    <el-table-column label="合同起止日期">
      <template #default="{ row }">
        {{ parseTime(row.startDate) }} - {{ parseTime(row.endDate) }}
      </template>
    </el-table-column>
    <el-table-column prop="contractPeriod" label="合同期限" />
    <el-table-column prop="contractStatus" label="状态">
      <template #default="{ row }">
        <el-tag :type="row.contractStatus === '1' ? 'success' : 'info'" size="small">
          {{ row.contractStatus === '1' ? '生效中' : '已结束' }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="signCompany" label="签约公司" />
    <el-table-column prop="signDate" label="签约日期">
      <template #default="{ row }">{{ parseTime(row.signDate) }}</template>
    </el-table-column>
    <el-table-column label="合同附件">
      <template #default="{ row }">
        <el-link v-if="row.contractFile" :href="row.contractFile" target="_blank">查看</el-link>
        <span v-else>--</span>
      </template>
    </el-table-column>
    <el-table-column prop="remarks" label="备注" />
  </el-table>
</div>
</div>
        <div v-else-if="activeTab === 'salary'"><!-- 社保公积金信息 -->
<el-descriptions title="社保公积金信息" :column="2" border style="margin-bottom: 20px;">
  <el-descriptions-item label="工资卡号">{{ dialogStaff.cardNumber || '--' }}</el-descriptions-item>
  <el-descriptions-item label="开户城市">{{ dialogStaff.bankCity || '--' }}</el-descriptions-item>
  <el-descriptions-item label="银行名称">{{ dialogStaff.bankName || '--' }}</el-descriptions-item>
  <el-descriptions-item label="开户网点">{{ dialogStaff.bankBranch || '--' }}</el-descriptions-item>
  <el-descriptions-item label="是否首次本地社保">{{ dialogStaff.firstLocalSocial ? '是' : '否' }}</el-descriptions-item>
  <el-descriptions-item label="是否首次本地公积金">{{ dialogStaff.firstLocalFund ? '是' : '否' }}</el-descriptions-item>
  <el-descriptions-item label="社保账号">{{ dialogStaff.socialId || '--' }}</el-descriptions-item>
  <el-descriptions-item label="公积金账号">{{ dialogStaff.fundId || '--' }}</el-descriptions-item>
  <el-descriptions-item label="参保起始月份">{{ dialogStaff.startMonth || '--' }}</el-descriptions-item>
  <el-descriptions-item label="参保方案">{{ dialogStaff.scheme || '--' }}</el-descriptions-item>
</el-descriptions>
<h3 style="font-weight: bold; margin: 20px 0 10px 0;">每月工资明细</h3>
<!-- 薪酬记录 -->
<el-table
  v-if="dialogStaff.salaryRecords && dialogStaff.salaryRecords.length"
  :data="dialogStaff.salaryRecords"
  border
  stripe
  style="width: 100%; margin-top: 20px;"
>
  <el-table-column prop="salaryCycle" label="工资周期" />
  <el-table-column label="工资月份">
    <template #default="{ row }">{{ parseTime(row.salaryMonth) }}</template>
  </el-table-column>
  <el-table-column prop="grossSalary" label="税前工资" />
  <el-table-column prop="personalTax" label="个人所得税" />
  <el-table-column prop="netSalary" label="实发工资" />
</el-table>
</div>
<div v-else-if="activeTab === 'attachments'">
    <div class="employee-section">
      <h3>员工基本资料</h3>
      <el-row :gutter="20">
        <el-col v-for="item in basicInfo" :key="item.label" :span="6">
          <el-card shadow="hover" class="employee-card" @click="openAttachmentDialog(item)">
            <el-icon :size="26"><component :is="item.icon" /></el-icon>
            <div class="label">{{ item.label }}</div>
          </el-card>
        </el-col>
      </el-row>

      <h3 style="margin-top: 30px;">员工档案资料</h3>
      <el-row :gutter="20">
        <el-col v-for="item in profileInfo" :key="item.label" :span="6">
          <el-card shadow="hover" class="employee-card" @click="openAttachmentDialog(item)">
            <el-icon :size="26"><component :is="item.icon" /></el-icon>
            <div class="label">{{ item.label }}</div>
          </el-card>
        </el-col>
      </el-row>

      <h3 style="margin-top: 30px;">员工离职资料</h3>
      <el-row :gutter="20">
        <el-col v-for="item in resignInfo" :key="item.label" :span="6">
          <el-card shadow="hover" class="employee-card" @click="openAttachmentDialog(item)">
            <el-icon :size="26"><component :is="item.icon" /></el-icon>
            <div class="label">{{ item.label }}</div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- Dialog 弹窗 -->
    <el-dialog v-model="attachmentDialogVisible" :title="dialogTitle" width="30%">
      
      <el-dialog v-model="attachmentDialogVisible" :title="dialogTitle" width="50%">
  <el-table :data="attachmentData" border stripe style="width: 100%">
    <el-table-column prop="fileName" label="文件名" />
  
    <el-table-column prop="uploadTime" label="上传时间">
      <template #default="{ row }">{{ parseTime(row.uploadTime) }}</template>
    </el-table-column>
    <el-table-column label="操作">
  <template #default="{ row }">
    <el-button type="primary" link @click="handlePreview(row)">查看</el-button>
  </template>
</el-table-column>
  </el-table>

  <template #footer>
    <el-button @click="attachmentDialogVisible = false">关闭</el-button>
    <FilePreview ref="filePreviewRef" />

  </template>
</el-dialog>
      <template #footer>
        <el-button @click="attachmentDialogVisible = false">关闭</el-button>
<el-button type="primary" @click="attachmentDialogVisible = false">确认</el-button>
      </template>
    </el-dialog>
  </div>

        <div v-else-if="activeTab === 'logs'">
          <!-- 操作记录时间线 -->
  <el-divider content-position="left">操作记录</el-divider>
  <el-timeline>
    <el-timeline-item
      v-for="item in dialogStaff.operationLogs"
      :key="item.id"
      :timestamp="parseTime(item.operationTime, 'YYYY-MM-DD HH:mm')"
      placement="top"
      type="primary"
    >
      <div>
        <span style="font-weight: bold; margin-right: 8px;">{{ item.operator }}</span>
        <span>{{ item.operationContent }}</span>
      </div>
      <div style="color: #999;">来源：{{ item.sourceSystem }} | IP：{{ item.ipAddress }}</div>
    </el-timeline-item>
  </el-timeline>


        </div>
        <!-- 调动记录时间线 -->
<div v-else-if="activeTab === 'transfer'">

  <el-divider content-position="left">调动记录</el-divider>
  <el-timeline>
    <el-timeline-item
      v-for="item in dialogStaff.transferList"
      :key="item.id"
      :timestamp="parseTime(item.effectiveDate, 'YYYY-MM-DD')"
      placement="top"
      type="primary"
    >
      <div>
        <strong>{{ item.oldDepartment }} - {{ item.oldPosition }}</strong>
        <span style="margin: 0 8px;">→</span>
        <strong>{{ item.newDepartment }} - {{ item.newPosition }}</strong>
      </div>
      <div>调动类型：{{ item.transferType }}，原因：{{ item.reason }}</div>
      <div style="color: #999;">操作人：{{ item.operator }} | 时间：{{ parseTime(item.operationTime, 'YYYY-MM-DD HH:mm') }}</div>
    </el-timeline-item>
  </el-timeline>
</div>

        <div v-else>请选择上方内容查看</div>
      </div>
    </el-dialog>

    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改员工基础信息对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="staffRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="中文姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入中文姓名" />
        </el-form-item>
        <el-form-item label="民族 下拉框" prop="ethnicity">
          <el-input v-model="form.ethnicity" placeholder="请输入民族 下拉框" />
        </el-form-item>
        <el-form-item label="性别 0男 1女" prop="gender">
          <el-input v-model="form.gender" placeholder="请输入性别 0男 1女" />
        </el-form-item>
        <el-form-item label="身份证号码" prop="idCardNumber">
          <el-input v-model="form.idCardNumber" placeholder="请输入身份证号码" />
        </el-form-item>
        <el-form-item label="出生日期" prop="birthDate">
          <el-date-picker clearable
            v-model="form.birthDate"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择出生日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="个人邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入个人邮箱" />
        </el-form-item>
        <el-form-item label="籍贯" prop="nativePlace">
          <el-input v-model="form.nativePlace" placeholder="请输入籍贯" />
        </el-form-item>
        <el-form-item label="户籍所在地" prop="address">
          <el-input v-model="form.address" placeholder="请输入户籍所在地" />
        </el-form-item>
        <el-form-item label="最高学历 下拉框" prop="degree">
          <el-input v-model="form.degree" placeholder="请输入最高学历 下拉框" />
        </el-form-item>
        <el-form-item label="入职日期" prop="hireDate">
          <el-date-picker clearable
            v-model="form.hireDate"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择入职日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="员工微信号" prop="wechat">
          <el-input v-model="form.wechat" placeholder="请输入员工微信号" />
        </el-form-item>
        <el-form-item label="员工现居住地" prop="currentAddress">
          <el-input v-model="form.currentAddress" placeholder="请输入员工现居住地" />
        </el-form-item>
        <el-form-item label="紧急联系人姓名" prop="contactName">
          <el-input v-model="form.contactName" placeholder="请输入紧急联系人姓名" />
        </el-form-item>
        <el-form-item label="与员工关系" prop="contactRelation">
          <el-input v-model="form.contactRelation" placeholder="请输入与员工关系" />
        </el-form-item>
        <el-form-item label="紧急联系人电话" prop="contactPhone">
          <el-input v-model="form.contactPhone" placeholder="请输入紧急联系人电话" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Staff">
import FilePreview from '@/components/FilePreview.vue'
const filePreviewRef = ref(null)

function handlePreview(row) {
  console.log("点击查看的文件 row 数据：", row);
  const url = row.filePath
  const title = row.fileName || '文件预览'
  if (!url) {
    proxy.$modal.msgError('文件地址不存在')
    return
  }
  filePreviewRef.value.openPreview(url, title)
}

import { listStaff, getStaff, delStaff, addStaff, updateStaff } from "@/api/staff/staff"
import { getCurrentInstance, ref, reactive, toRefs } from 'vue'

import dayjs from 'dayjs'
const parseTime = (time, format = 'YYYY-MM-DD') => {
  return time ? dayjs(time).format(format) : ''
}
const attachmentDialogVisible = ref(false)

import request from '@/utils/request';
const attachmentData = ref([])  // 存后端返回的附件列表

function openAttachmentDialog(item) {
  dialogTitle.value = item.label
  attachmentDialogVisible.value = true

  // 假设当前员工 ID 是 dialogStaff.value.id
  const employeeId = dialogStaff.value.id
  const typeCode = item.type

  if (!employeeId || !typeCode) return

  request({
    url: `/staff/staff/documentsById`,
    method: 'get',
    params: {
      id: employeeId,
      type: typeCode
    }
  }).then(res => {
    console.log("返回的附件数据：", res.data)
    attachmentData.value = res.data || [];
  }).catch(() => {
    proxy.$modal.msgError("加载附件失败")
  })
}
const { proxy } = getCurrentInstance()

const staffList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: null,
    ethnicity: null,
    gender: null,
    idCardNumber: null,
    birthDate: null,
    maritalStatus: null,
    phone: null,
    email: null,
    politicalStatus: null,
    nativePlace: null,
    address: null,
    healthStatus: null,
    degree: null,
    hireDate: null,
    status: null,
    wechat: null,
    currentAddress: null,
    contactName: null,
    contactRelation: null,
    contactPhone: null,
  },
  rules: {
  }
})

const dialogTitle = ref('')


const { queryParams, form, rules } = toRefs(data)
function getAge(birthDate) {
  if (!birthDate) return '--';
  const birth = new Date(birthDate);
  const now = new Date();
  let age = now.getFullYear() - birth.getFullYear();
  const m = now.getMonth() - birth.getMonth();
  if (m < 0 || (m === 0 && now.getDate() < birth.getDate())) {
    age--;
  }
  return age;
}
const basicInfo = [
  { label: '身份证原件照片', icon: 'User', type: '1' },
  { label: '学历证明', icon: 'Reading', type: '2' },
  { label: '个人证件照', icon: 'Avatar', type: '3' },
  { label: '身份证复印件', icon: 'Document', type: '4' },
  { label: '工资银行卡', icon: 'CreditCard', type: '5' },
  { label: '社保卡', icon: 'Wallet', type: '6' },
  { label: '公积金卡', icon: 'HomeFilled', type: '7' },
  { label: '获奖证书', icon: 'Tickets', type: '8' },
  { label: '其他', icon: 'Setting', type: '9' }
]


const profileInfo = [
  { label: '劳动合同', icon: 'Document', type: '10' },
  { label: '入职简历', icon: 'UserFilled', type: '11' },
  { label: '入职登记表', icon: 'Edit', type: '12' },
  { label: '入职体检单', icon: 'List', type: '13' },
  { label: '上家公司离职证明', icon: 'DocumentCopy', type: '14' },
  { label: '转正申请表', icon: 'EditPen', type: '15' },
  { label: '其他', icon: 'Setting', type: '16' }
]


const resignInfo = [
  { label: '离职审批', icon: 'User', type: '17' },
  { label: '离职证明', icon: 'CircleClose', type: '18' },
  { label: '其他', icon: 'Setting', type: '19' }
]


/** 查询员工基础信息列表 */
function getList() {
  loading.value = true
  listStaff(queryParams.value).then(response => {
    staffList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

// 取消按钮
function cancel() {
  open.value = false
  reset()
}


const dialogVisible = ref(false);
const dialogStaff = ref({});
const activeTab = ref('base');
const tabs = [
  { label: '基本信息', value: 'base' },
  { label: '岗位信息', value: 'position' },
  { label: '员工合同', value: 'contract' },
  { label: '工资社保', value: 'salary' }, 
  { label: '材料附件', value: 'attachments' },
  { label: '调动记录', value: 'transfer' },
  { label: '操作记录', value: 'logs' }
]
import {
  queryStaffById,
  queryJobById,
  querySalaryInfo,
  queryContractList,     // ✔ 正确函数名
  queryOperationLogs,
  queryTransferLogs
} from "@/api/staff/staff";


function openDialog(row) {
  const id = row.id;

  Promise.all([
    queryStaffById(id),
    queryJobById(id),
    querySalaryInfo(id),
    queryContractList(id),
    queryTransferLogs(id),
    queryOperationLogs(id)
  ]).then(([staffRes, jobRes, salaryRes, contractRes, transferRes, logRes]) => {
    if (
      staffRes.code === 200 &&
      jobRes.code === 200 &&
      salaryRes.code === 200 &&
      contractRes.code === 200 &&
      transferRes.code === 200 &&
      logRes.code === 200
    ) {
      // ✅ 加在这里
      console.log('岗位信息', jobRes.data);
      console.log('调动记录', transferRes.data);

      dialogStaff.value = {
        ...staffRes.data,
        jobInfo: jobRes.data,
        ...salaryRes.data,
        contracts: contractRes.data,
        transferList: transferRes.data,
        operationLogs: logRes.data
      };
      dialogVisible.value = true;
    } else {
      proxy.$modal.msgError("获取员工信息失败");
    }
  }).catch(() => {
    proxy.$modal.msgError("请求失败，请检查接口或网络");
  });
}





// 表单重置
function reset() {
  form.value = {
    id: null,
    name: null,
    ethnicity: null,
    gender: null,
    idCardNumber: null,
    birthDate: null,
    maritalStatus: null,
    phone: null,
    email: null,
    politicalStatus: null,
    nativePlace: null,
    address: null,
    healthStatus: null,
    degree: null,
    hireDate: null,
    status: null,
    wechat: null,
    currentAddress: null,
    contactName: null,
    contactRelation: null,
    contactPhone: null,
    createTime: null,
    updateTime: null
  }
  proxy.resetForm("staffRef")
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

/** 新增按钮操作 */
function handleAdd() {
  reset()
  open.value = true
  title.value = "添加员工基础信息"
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset()
  const _id = row.id || ids.value
  getStaff(_id).then(response => {
    form.value = response.data
    open.value = true
    title.value = "修改员工基础信息"
  })
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["staffRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateStaff(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addStaff(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  })
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value
  proxy.$modal.confirm('是否确认删除员工基础信息编号为"' + _ids + '"的数据项？').then(function() {
    return delStaff(_ids)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}
function getDegreeName(code) {
  const degreeMap = {
    '1': '小学',
    '2': '初中',
    '3': '高中',
    '4': '大专',
    '5': '本科',
    '6': '硕士',
    '7': '博士'
  };
  return degreeMap[code] || '未知';
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('staff/staff/export', {
    ...queryParams.value
  }, `staff_${new Date().getTime()}.xlsx`)
}

getList()
</script>    